<script setup>
import { ref } from 'vue'
import { RouterLink, useRoute } from 'vue-router'
import SiteNotice from '../components/SiteNotice.vue'
import GunAttr from '../components/gun/GunAttr.vue'
import GunSkill from '../components/gun/GunSkill.vue'
import GunTalent from '../components/gun/GunTalent.vue'
import GunDaily from '../components/gun/GunDaily.vue'
import jsonToMap from '../j2m.js'
import gundata from '../data/GunData.json'
import chardata from '../data/GunCharacterData.json'
import weapondata from '../data/GunWeaponData.json'
import dailylist from '../data/CharacterDailyByGunIdData.json'
import reference from '../data/ref.json'
import { store } from '../store/store.js'
import { getParsedText, getText } from '../store/txtstore'
import '../assets/property.css'
import '../assets/elem.css'

const classes = ['', '防卫', '尖兵', '支援', '火力']
const ranks = { 4: '标准', 5: '精英' }
const weaponTypes = ['', '手枪', '冲锋枪', '步枪', '突击步枪', '机枪', '霰弹枪', '刀']

const uid = ref(0)
const name = ref('')
const refLink = ref('')
const chara = ref({})
const weapons = ref({})
const weaponElem = ref()
const vulnElem = ref('')
const vulnWeaponElem = ref('')
const growing = ref({})
const constant = ref({})
const classExtra = ref([])

const route = useRoute()

const charData = jsonToMap(chardata.data)
const gun = gundata.data[route.params.uid]
loadData(gun)

function loadData(data) {
  uid.value = data[1]
  refLink.value = reference[data[1]]

  const gb = 1000000 + data[36] * 10
  const gsobj = { '2': 0, '3': 0, '5': 0 }
  for (let g = 1; g < 6; g++) {
    classExtra.value.push(Object.fromEntries(Object.entries(gsobj)))
    const gobj = store.properties.get(+`${gb}${g}`)
    if (gobj) {
      for (const a of [2, 3, 5]) {
        gsobj[a] += gobj[a]
      }
    }
  }

  for (const c of charData.values()) {
    if (c[9] == data[1]) {
      chara.value = c
      name.value = getText(c[2][1])
      break
    }
  }

  weapons.value.initial = weapondata.data[data[27]]
  weapons.value.special = weapondata.data[data[25]]
  if (data[26]) {
    weapons.value.model = data[26].find(i => i != data[25] && i != data[27])
  }
  weaponElem.value = weapondata.data[data[27]][36]

  vulnElem.value = data[64]
  vulnWeaponElem.value = data[72]

  const attrs = store.properties.get(10000 + data[1])
  growing.value = {
    '2': attrs[2],
    '3': attrs[3],
    '5': attrs[5]
  }
  constant.value = {
    '7': attrs[7] / 100,
    '8': attrs[8],
    '9': attrs[9],
    '10': attrs[10]
  }
}

const showTalent = ref(false)
const viewDaily = ref(false)
</script>

<template>
  <main>
    <SiteNotice/>
    <h1>{{ name }}<a v-if="refLink" :href="'https://www.gfwiki.org/w/' + refLink" target="_blank">{{ refLink }}</a></h1>
    <nav>
      <button v-if="viewDaily" @click="() => viewDaily = false">返回</button>
    </nav>
    <GunDaily v-if="viewDaily" :ids="dailylist[uid]" />
    <article v-else>
      <img :src="`/exilium/icons/avatar/Avatar_Head_${gun[9]}.png`" class="avatar">
      <section class="char">
        <table>
          <tr>
            <th>职业</th>
            <td>{{ classes[gun[13]] }}</td>
          </tr>
          <tr>
            <th>稀有度</th>
            <td :class="'rank-' + gun[15]">{{ ranks[gun[15]] }}</td>
          </tr>
          <tr>
            <th>武器种类</th>
            <td>{{ weaponTypes[gun[24]] }}</td>
          </tr>
        </table>
        <table>
          <tr>
            <th>中配</th>
            <td>{{ getParsedText(chara[12]?.[1]) }}</td>
          </tr>
          <tr>
            <th>日配</th>
            <td>{{ getParsedText(chara[13]?.[1]) }}</td>
          </tr>
          <tr>
            <th>素体型号</th>
            <td>{{ getParsedText(chara[15]?.[1]) }}</td>
          </tr>
          <tr>
            <th>烙印编号</th>
            <td>
              <RouterLink v-if="weapons.model" :to="`/weapon/${weapons.model}`">{{ getParsedText(chara[16]?.[1]) }}</RouterLink>
              <template v-else>{{ getParsedText(chara[16]?.[1]) }}</template>
            </td>
          </tr>
          <tr>
            <th>权限归属</th>
            <td>{{ getParsedText(chara[17]?.[1]) }}</td>
          </tr>
        </table>
        <div>
          <h2>个人介绍</h2>
          <p>{{ getParsedText(chara[11]?.[1]) }}</p>
        </div>
        <button v-if="dailylist[uid]" @click="() => viewDaily=true">日志</button>
      </section>
      <GunAttr :vuln-elem="vulnElem" :vuln-weapon-elem="vulnWeaponElem" :growing="growing" :constant="constant" :class-extra="classExtra" />
      <section style="grid-area:wp;">
        <h2>武器</h2>
        <ul>
          <li>初始武器：<RouterLink :to="`/weapon/${weapons.initial[1]}`">{{ getText(weapons.initial[2][1]) }}</RouterLink></li>
          <li v-if="weapons.special">烙印增效武器：<RouterLink :to="`/weapon/${weapons.special[1]}`">{{ getText(weapons.special[2][1]) }}</RouterLink></li>
        </ul>
      </section>
      <GunSkill :uid="uid" :weapon-elem="weaponElem" />
      <section style="grid-area:tl;">
        <h2 @click="showTalent = true">心智螺旋&nbsp;&nbsp;&nbsp;&nbsp<span style="font-size:1rem;cursor:pointer;">点击浏览</span>
        </h2>
        <GunTalent :uid="uid" v-if="showTalent" />
      </section>
    </article>
  </main>
</template>

<style scoped>
h1 a {
  font-size: 1rem;
  margin-left: 1em;
}

article {
  column-gap: 12px;
  display: grid;
  grid-area: c;
  grid-template-areas:
    "av av"
    "ch at"
    "wp wp"
    "gr gr"
    "sk sk"
    "tl tl";
  grid-template-columns: 1fr 1fr;
}

.avatar {
  grid-area: av;
}

.char {
  grid-area: ch;
}

.char th {
  text-align: left;
  width: 5em;
}

.char td {
  text-align: right;
}

table {
  width: 100%;
}

th {
  font-weight: bold;
}

@media (max-width: 600px) {
  article {
    display: flex;
    flex-wrap: wrap;
  }
}
</style>
